
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#container{
			width: 80%;
			height: 600px;
			border: 2px solid red;
			background: #000;
			margin:20px auto;
			position: relative;
			overflow: hidden;
		}
		.fire{
			width: 10px;
			height:10px;
			position: absolute;
			bottom: 0;
		}
		.small-fire{
			width: 10px;
			height:10px;
			position: absolute;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div id="container"></div>
</body>
<script src="../move.js" ></script>
<script type="text/javascript">
    // OOA：烟花，点击页面位置，出现元素运动，运动到终点，删除，创建好多元素，运动到指定随机位置，到终点，删除
        // 主体烟花
            // 创建元素，设置位置，设置颜色，插入页面
            // 开始运动，到终点
            // 删除元素
        // 小烟花
            // 创建多个元素，设置位置，设置颜色，插入页面
            // 开始运动，到终点
            // 删除元素

    // OOD：
        // function Fire(){}
        // Fire.prototype.create = function(){}
        // Fire.prototype.fireMove = function(){
        //     move(运动源,目标,function(){
        //         // 删除元素
        //         new SmallFire()
        //     })
        // }
        // function SmallFire(){}
        // SmallFire.prototype.create = function(){}
        // SmallFire.prototype.fireMove = function(){
        //     move(运动源,目标,function(){
        //         // 删除元素
        //     })
        // }
        // 容器.onclick = function(){
        //     new Fire();
        // }

    // OOP：
        function Fire(ops){
            // 1. 将参数解析之后，保存到实例身上，方便在其他方法中使用
            this.x = ops.x;
            this.y = ops.y;
            this.cont = ops.cont;

            // 2. 创建元素功能
            this.create();
        }
        Fire.prototype.create = function(){
            this.div = document.createElement("div");
            this.div.className = "fire";
            this.cont.appendChild(this.div);
            // 设置背景色为随机颜色
            this.div.style.background = randomColor();
            // 设置元素的位置为鼠标点击的x坐标
            this.div.style.left = this.x + "px";
            // 3. 主题烟花开始运动
            this.fireMove();
        }
        Fire.prototype.fireMove = function(){
            move(this.div, {
                top: this.y
            },()=>{
                // 删除元素
                this.div.remove();
                
                // 创建随机数，决定创建多少个小烟花
                var num = random(10,20);
                for(var i=0;i<num;i++){
                    new SmallFire({
                        x:this.x,
                        y:this.y,
                        cont:this.cont
                    });
                }
            })
        }

        function SmallFire(ops){
            this.x = ops.x
            this.y = ops.y;
            this.cont = ops.cont;

            this.create();
        }
        SmallFire.prototype.create = function(){
            this.div = document.createElement("div");
            this.div.className = "small-fire";
            this.cont.appendChild(this.div);
            this.div.style.background = randomColor();
            this.div.style.left = this.x + "px";
            this.div.style.top = this.y + "px";

            this.fireMove();
        }
        SmallFire.prototype.fireMove = function(){
            // 计算随机目标
            var target = {
                x:random(0, this.cont.offsetWidth - this.div.offsetWidth),
                y:random(0, this.cont.offsetHeight - this.div.offsetHeight)
            }
            move(this.div,{
                left:target.x,
                top:target.y
            },function(){
                // 删除元素
                this.div.remove();
            }.bind(this))
        }




        // 0. 点击页面上的容器，创建烟花元素，并将鼠标坐标信息传入构造函数
        var ocont = document.getElementById("container");
        ocont.onclick = function(eve){
            var e = eve || window.event;
            new Fire({
                x:e.offsetX,
                y:e.offsetY,
                cont:this
            });
        }
    


    // 随机数功能
    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }
    // 随机颜色功能
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
    }
</script>
</html>